<template>
  <!-- 填空 -->
  <el-form
    ref="form"
    :model="form"
    :disabled="readonly"
    :rules="rules"
    label-width="220px"
    class="test-form"
  >
    <el-form-item label="题干" prop="stem">
      <el-input
        :maxlength="200"
        show-word-limit
        type="textarea"
        v-model.trim="form.stem"
        rows="4"
        class="textareaClass"
        placeholder="请输入题干"
        style="width:60%"
      ></el-input>
    </el-form-item>
    <el-row>
      <el-col>
        <el-form-item
          v-for="(option, index) in form.domains"
          :key="index"
          :label="'答案' + (index + 1) + '：'"
          :rules="{
            required: true,
            message: '答案不能为空',
            trigger: 'blur',
          }"
          :prop="'domains.' + index + '.value'"
          class="answer-list"
        >
          <el-input
            :maxlength="200"
            show-word-limit
            type="textarea"
            v-model.trim="option.value"
            rows="2"
            class="textareaClass"
            placeholder="请输入答案"
            style="width:60%"
          ></el-input>
          <el-tooltip
            class="item"
            effect="dark"
            content="删除此答案"
            placement="top"
          >
            <el-button
              @click="delOption(index)"
              class="delete"
              :disabled="form.domains.length == 1"
              v-if="index!==0"
            >
              删除
            </el-button>
          </el-tooltip>
          <el-button
            class="add-more-btn"
            size="small"
            type="primary"
            @click="addOption"
            v-if="index==form.domains.length-1"
            >新增答案</el-button
          >
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
const createModalForm = {
  stem: "",
  answer: [],
  domains: new Array(1).fill({ value: "" }),
}
export default {
  props: {
    readonly: {
      type: Boolean,
      default: false,
    },
  },
  name: "SanyuanMmFrontIndex",
  data() {
    return {
      // 表单校验
      rules: {
        stem: [
          {
            required: true,
            message: "题干不能为空",
            trigger: ["blur", "change"],
          },
        ],
        answer: [
          {
            required: true,
            message: "请选择答案",
            trigger: ["blur", "change"],
          },
        ],
      },
      form: Object.assign({}, createModalForm),
    }
  },
  watch: {
    form: {
      handler(newVal) {
        this.$emit("formData", newVal)
      },
      deep: true,
    },
  },
  mounted() {},
  methods: {
    addOption() {
      this.form.domains.push({
        value: "",
      })
    },
    delOption(index) {
      this.form.domains.splice(index, 1)
    },

    // 表单重置
    reset() {
      this.form = {
        ...createModalForm,
        domains: [
          {
            value: "",
          },
        ],
      }
    },
    // 取消按钮
    cancel() {
      this.operatorDialog = false
      this.batchDialog = false
    },
  },
}
</script>

<style lang="scss">
.batchPage {
  display: flex;
  flex: 1;
  flex-direction: row;
}
.answer-list {
  .el-form-item__content {
    display: flex;
    align-items: center;
  }
  button {
    margin-left: 20px;
  }
}
.add-more-btn {
  margin-left: 50%;
}
</style>
